<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->
<div class="drag-wrap"
     jigsaw-draggable jigsaw-droppable
     (jigsawDragStart)="dragStartHandle($event)"
     (jigsawDragEnd)="dragEndHandle($event)"
     (jigsawDragEnter)="dragEnterHandle($event)"
     (jigsawDragOver)="dragOverHandle($event)"
     (jigsawDrop)="dropHandle($event)"

     *ngFor="let info of [
                {label: '111', clazz: 'box1'},
                {label: '222', clazz: 'box2'},
                {label: '333', clazz: 'box3'},
                {label: '444', clazz: 'box4'}
            ]"
>
    <div class="com-box {{info.clazz}}">
        <span>{{info.label}}</span>
    </div>
</div>
